<template>
  <div class="WorkingSchedule" v-loading="loading">
    <div>
      <el-table :data="indexdata.aaa" border style="width: 100%">
        <el-table-column
          prop="shangjiashu"
          label="上期延期件数"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="benjiashu"
          label="本期延期件数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="shangzhou"
          label="上期订单数"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="benzhou"
          label="本期订单数"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div class="WorkingSchedule-flex">
      <div id="postponenum" class="echartsStyle"></div>
      <div id="cake" class="echartsStyle"></div>
    </div>
    <div class="WorkingSchedule-flex">
      <div id="broken" class="echartsStyle"></div>
      <div class="echartsStyle" style="display: flex">
        <el-table :data="indexdata.paixuaa" border style="width: 100%">
          <el-table-column
            prop="date"
            label="商品编码延期结束top5"
            width="180"
            align="center"
          >
            <el-table-column
              prop="product_name"
              label="商品名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="product_code"
              label="商品编码"
              width="160"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="snum"
              label="数量"
              width="80"
              align="center"
            ></el-table-column>
          </el-table-column>
        </el-table>
        <el-table :data="indexdata.paixu" border style="width: 100%">
          <el-table-column
            prop="date"
            label="商品款号延期结束top5"
            width="180"
            align="center"
          >
            <el-table-column
              prop="product_name"
              label="商品名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="type_no"
              label="商品款号"
              width="160"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="snum"
              label="数量"
              width="80"
              align="center"
            ></el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="WorkingSchedule-flex">
      <div id="order" class="echartsStyle"></div>
      <div class="echartsStyle" style="display: flex">
        <el-table :data="indexdata.dayarrs" border style="width: 100%">
          <el-table-column
            prop="day"
            label="等待天数"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              {{ Math.abs(row.day) }}天
            </template>
          </el-table-column>
          <el-table-column
            prop="num"
            label="上期等待订单数"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <el-form
      ref="form"
      :model="form"
      class="myform"
      style="margin-top: 50px; padding-top: 30px; border-top: 1px solid #ebeef5"
    >
      <template>
        <el-form-item label="延期天数" class="myform-item">
          <el-select v-model="form.date" placeholder="请选择延期天数">
            <el-option label="不限" value=""> </el-option>
            <el-option
              v-for="item in xialadays"
              :key="item.day"
              :value="item.date"
              :label="Math.abs(item.day)"
            >
            </el-option>
          </el-select>
          <el-button @click="onSearch" style="margin-left:20px" type="primary">查询</el-button>
        </el-form-item>
      </template>
    </el-form>
    <el-table :data="tableData" style="width: 100%" border>
      <template v-for="(item, index) in tableHeader">
        <el-table-column
          v-if="
            item.name != '操作' &&
            item.key != 'sclist' &&
            item.key != 'jhlist' &&
            item.key != 'yylist' &&
            item.key != 'kflistk'
          "
          :label="item.name"
          :key="index"
          align="center"
          :prop="item.key"
        >
        </el-table-column>
        <el-table-column
          v-if="item.name != '操作' && item.key == 'sclist'"
          :label="item.name"
          :key="index"
          align="center"
          :prop="item.key"
        >
          <template slot-scope="{ row }">
            <div v-for="(items, index) in row.sclist" :key="index">
              {{ items.ad_name }}:{{ items.notes }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.name != '操作' && item.key == 'jhlist'"
          :label="item.name"
          :key="index"
          align="center"
          :prop="item.key"
        >
          <template slot-scope="{ row }">
            <div v-for="(items, index) in row.jhlist" :key="index">
              {{ items.y_date }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.name != '操作' && item.key == 'yylist'"
          :label="item.name"
          :key="index"
          align="center"
          :prop="item.key"
        >
          <template slot-scope="{ row }">
            <div v-for="(items, index) in row.yylist" :key="index">
              {{ items.ad_name }}:{{ items.notes }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.name != '操作' && item.key == 'kflistk'"
          :label="item.name"
          :key="index"
          align="center"
          :prop="item.key"
        >
          <template slot-scope="{ row }">
            <div v-for="(items, index) in row.kflistk" :key="index">
              {{ items.ad_name }}:{{ items.notes }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="
            item.name == '操作' &&
            (user.level == 5 || user.level == 6 || user.level == 7)
          "
          :label="item.name"
          :key="index"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button @click="onEditPostpone(row)" type="primary"
              >编辑延期说明</el-button
            >
          </template>
        </el-table-column>
      </template>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postApilookdate"
    />
    <el-dialog
      title="延期说明"
      :visible.sync="postponeVisible"
      :close-on-click-modal="false"
      width="30%"
      center
    >
      <div>
        <div style="display: flex">
          <div style="width: 120px">产品编码</div>
          <el-input
            style="width: 400px"
            v-model="postponeform.product_code"
            disabled
            placeholder="请输入产品编码"
          ></el-input>
        </div>
        <div style="margin-top: 30px; display: flex">
          <div style="width: 120px">延期说明</div>
          <el-input
            type="textarea"
            style="width: 400px"
            rows="3"
            v-model="postponeform.notes"
            placeholder="请输入延期说明"
          ></el-input>
        </div>

        <div style="margin-top: 30px; display: flex" v-if="user.level == 5">
          <span style="width: 120px">下次交货日期</span>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="postponeform.y_date"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="loading" type="primary" @click="onSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getStore } from "@/utils/localStorage.js";
import {
  postApilooklist,
  postApicakelist,
  postApibrokenlist,
  postApiorderlist,
  postApilookindex,
  postApilookdate,
  postApixialadays,
  postApiaddcontentdo,
} from "@/api";
import pagination from "@/components/pagination.vue";
import {
  postponenum,
  postponecake,
  postponecomparison,
  postponeorder,
} from "./postponenum.js";
export default {
  components: { pagination },
  data() {
    return {
      postponeVisible: false,
      loading: false,
      postponeform: {
        type_id: "",
        fa_date: "",
        product_code: "",
        notes: "",
        y_date: "",
      },
      postponeItem: "",
      date: "",
      indexdata: "",
      form: {
        date: "",
        page: 1,
        size: 10,
      },
      tableHeader: [
        {
          name: "交货日期",
          key: "f_date",
        },
        {
          name: "商品编码",
          key: "product_code",
        },
        {
          name: "商品名称",
          key: "product_name",
        },
        {
          name: "数量",
          key: "num",
        },
        {
          name: "生产部延期说明",
          key: "sclist",
        },
        {
          name: "下次交货日期",
          key: "jhlist",
        },
        {
          name: "运营部延期说明",
          key: "yylist",
        },
        {
          name: "客服部延期说明",
          key: "kflistk",
        },
        {
          name: "操作",
          key: "",
        },
      ],
      tableData: [],
      total: 1,
      postponenumdata: {}, // 延期数量柱状图数据
      postponecakedata: {}, // 延期数量饼状图数据
      postponecomparisondata: {}, // 延期对比折线图数据
      postponeorderdata: {}, // 等待订单数柱状图数据
      xialadays: [],
    };
  },
  async activated() {
    this.user = getStore("userinfo");
    let form = this.form;
    this.postApixialadays();
    await this.postApilookindex();
    await this.postApilookdate(form);
    await this.postApilooklist();
    await this.postApicakelist();
    await this.postApibrokenlist();
    await this.postApiorderlist();
    await this.postponenum(postponenum(this.postponenumdata));
    await this.postponecake(postponecake(this.postponecakedata));
    await this.postponebroken(postponecomparison(this.postponecomparisondata));
    await this.postponeorder(postponeorder(this.postponeorderdata));
  },
  methods: {
    // 提交
    onSubmit() {
      this.loading = true;
      let { user, postponeform } = this;
      if (!postponeform.notes) {
        return this.$message.warning("延期说明不能为空");
      }
      if (user.level == 5 && !postponeform.y_date) {
        return this.$message.warning("请选择下次交货日期");
      }
      postApiaddcontentdo(postponeform)
        .then((res) => {
          this.loading = false;
          this.postponeVisible = false;
          return this.$message.success("提交成功");
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 编辑延期说明
    onEditPostpone(row) {
      this.postponeItem = row;
      let user = this.user;
      if (user.level == 5) {
        this.postponeform.type_id = 1;
      } else if (user.level == 6) {
        this.postponeform.type_id = 2;
      } else if (user.level == 7) {
        this.postponeform.type_id = 3;
      }
      this.postponeform.fa_date = row.f_date;
      this.postponeform.y_date = "";
      this.postponeform.product_code = row.product_code;
      this.postponeVisible = true;
    },
    // 数据（刷新）
    async postApilookdate(data) {
      this.loading = true;
      this.form = data;
      await postApilookdate(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.tableData = res.date;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 搜索
    onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      this.postApilookdate(this.form);
    },
    // 总看板（刷新列表，下拉天数）
    postApixialadays() {
      postApixialadays().then((res) => {
        console.log("总看板（刷新列表，下拉天数）", res);
        this.xialadays = res.dayarrs;
      });
    },
    // 数据（不刷新）
    postApilookindex() {
      postApilookindex().then((res) => {
        console.log("数据（不刷新）", res);
        let arr = [];
        arr.push(res.aaa);
        res.aaa = arr;
        this.indexdata = res;
      });
    },
    // 编辑
    onEdit(e) {
      console.log("编辑", e);
      this.detail = e;
      this.dialogVisible = true;
    },

    // 延期数量柱状图
    async postponenum(data) {
      let myChart = echarts.init(document.getElementById("postponenum"));
      // 绘制图表
      myChart.setOption(data);
    },
    // 延期柱状图数据
    async postApilooklist() {
      await postApilooklist().then((res) => {
        console.log("延期柱状图数据", res);
        this.postponenumdata = res;
      });
    },
    // 延期数量饼状图
    async postponecake(data) {
      let myChart = echarts.init(document.getElementById("cake"));
      // 绘制图表
      myChart.setOption(data);
    },
    // 延期饼状图数据
    async postApicakelist() {
      await postApicakelist().then((res) => {
        console.log("延期饼状图数据", res);
        this.postponecakedata = res;
      });
    },
    // 延期对比折线图
    async postponebroken(data) {
      let myChart = echarts.init(document.getElementById("broken"));
      // 绘制图表
      myChart.setOption(data);
    },
    // 延期对比折线图数据
    async postApibrokenlist() {
      await postApibrokenlist().then((res) => {
        console.log("延期对比折线图数据", res);
        this.postponecomparisondata = res;
      });
    },
    // 等待订单数柱状图
    async postponeorder(data) {
      let myChart = echarts.init(document.getElementById("order"));
      // 绘制图表
      myChart.setOption(data);
    },
    // 等待订单数柱状图数据
    async postApiorderlist() {
      await postApiorderlist().then((res) => {
        console.log("等待订单数柱状图数据", res);
        this.postponeorderdata = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsStyle {
  width: 49%;
  height: 400px;
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
  &-flex {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
  }
}
</style>
